import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:auto_route/auto_route.dart';
import 'package:written_exam/widgets/responsive_grid.dart';
import 'package:written_exam/app_router.dart';

@RoutePage()
class BoxPage extends ConsumerWidget {
  const BoxPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final boxCount = ref.watch(boxCountProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('Box Counter')),
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.green.withOpacity(0.2),
              child: ResponsiveGrid(
                itemCount: boxCount,
                itemBuilder:
                    (context, index) => GestureDetector(
                      onTap:
                          () => context.router.push(BoxDetailRoute(id: index)),
                      child: Container(
                        margin: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Center(
                          child: Text(
                            'Box ${index + 1}',
                            style: const TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                            ),
                          ),
                        ),
                      ),
                    ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FloatingActionButton(
                  onPressed: () => ref.read(boxCountProvider.notifier).state++,
                  child: const Icon(Icons.add),
                ),
                const SizedBox(width: 20),
                FloatingActionButton(
                  onPressed: () {
                    if (boxCount > 0) {
                      ref.read(boxCountProvider.notifier).state--;
                    }
                  },
                  child: const Icon(Icons.remove),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
